<template>
    <div>
        <myhead title="影院"  > </myhead>
        <div class="top">
            <div class="left">
                <van-popover
                    v-model="showPopover"
                    trigger="click"
                    placement="bottom-start"
                    >
                     <van-grid
                        square
                        clickable
                        :border="false"
                        column-num="4"
                        style="width:260px;"
                    >   
                        <van-grid-item
                            text="全部"
                            @click="chooseAll()"
                        />
                        <van-grid-item
                            v-for="(l,i) in areas"
                            :key="i"
                            :text="l.text"
                            @click="onSelect(l)"
                        />
                    </van-grid>
                    <template #reference>
                        <span>{{address}}</span>
                        <van-icon name="arrow-down" />
                    </template>
                </van-popover>
                
            </div>
            <div class="right">
                <van-dropdown-menu >
                    <van-dropdown-item @change="getvalue" v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </div>
        </div>
        <cinemaList :key="knum" :cinemas="list" ></cinemaList>
    </div>
</template>


<script>
export default {
    data(){
        return {
            value1:0,
            option1: [
                { text: '价格排序', value: 0 },
                { text: '升序', value: 1 },
                { text: '降序', value: 2 },
            ],
            list:[],
            lastList:[],
            knum:1,
            areas:[],
            showPopover:false,
            address:'地区'
            
        }
    },
    methods:{
        chooseAll(){
            this.showPopover = false;
            this.address  = '全部'
            this.list = this.allCinemas 
        },
        onSelect(l){
            this.showPopover = false;
            this.address  = l.name;
            this.list = this.allCinemas.filter(item=>item.district.districtId==l.districtId)
        },
        getvalue(value){
            console.log(value)
            if(value==0){
                this.list = [...this.allCinemas];
                this.$forceUpdate()  // 强制刷新      默认不排序  bug
                this.knum++;
            }else if(value==1){
                this.list.sort(this.arraySort)   // 可变的数组方法  改变原始数组 
            }else{
                this.list.sort(this.arraySortdesc)
            }
            
        },
        arraySort(a,b){
            return a.lowPrice-b.lowPrice    // 升序
        },
        arraySortdesc(a,b){
            return b['lowPrice']-a['lowPrice']    // 降序
        },
    },
    mounted(){
        if(this.city){
            if(this.allCinemas.length!=0){
                this.$ajax.getmaizuo({
                    cityId:this.city.cityId,
                },{
                    'X-Host': 'mall.film-ticket.cinema.list'  // cors 
                })
                .then(res=>{
                    // 延迟执行  setTimeout 
                    // 在下次 DOM 更新循环结束之后执行延迟回调
                    this.$nextTick(()=>{
                        this.list = [...res.data.data.cinemas]
                        this.changeallCinemas(res.data.data.cinemas)
                        // 数组去重
                        var arr = []
                        var obj = {}
                        for(var i =0;i<this.list.length;i++){
                            if(!obj[this.list[i].district.name]){   // obj.江岸区 
                                arr.push(this.list[i].district)
                                obj[this.list[i].district.name] = true 
                            }
                        }
                        this.areas = arr.map(item=>{
                            return {...item,text:item.name}
                        })
                        console.log(this.areas)
                        
                    })
                    
                })
            }
        }else{
            Dialog.alert({
                title: '提示',
                message: '未定位城市',
            })
            .then(() => {
                // on confirm
                this.$router.push({name:'city'})
            })
        }
    }
}
</script>


<style lang="scss" >
.top{
    width:100%;
    height:50px;
    display: flex;
    .left{
        flex:1;
        display:flex;
        justify-content: center;
        align-items: center;
        font-size:15px;
        color:#999;
    }
    .right{
        flex:1
    }
}
::v-deep .van-dropdown-menu{
    border:none;
    background: transparent !important;
}
::v-deep .van-dropdown-menu__bar{
    background: transparent !important;
    border:none;
}
::v-deep .van-dropdown-menu__item{
    background: transparent !important;
    border:none;
}
</style>
